 <template>
  <div>
    <footer>
    <span @click="tz(0)">首页</span>
    <span @click="tz(1)">分类</span>
    <span @click="tz(2)">购物车</span>
    </footer>
    <router-view></router-view>
  </div>
</template>
 <script>
export default {
  data() {
    return {
        titele:"首页"
    };
  },
  methods: {
      tz(i){
       if(i==0){
       this.$router.push({path:"/sy"})
       }
       if(i==1){
        this.$router.push({path:"/fl"})
       }
        if(i==2){
        this.$router.push({path:"/gw"})
       }
      }
  },
  //在渲染该组件的对应路由被 confirm 前调用
  beforeRouteEnter(to,from,next){  
   console.log(1);
   next()
  },
  computed: {},
};
</script>
 <style lang='css'>
 *{
     margin: 0;
     padding: 0;
 }
 footer{
     width: 100%;
     height: 3rem;
     border: 1px solid #000;
     position:fixed;
     bottom: 0rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0px 20px;
     box-sizing: border-box;
 }
</style>